<template>
  <van-popup v-model="visible" position="bottom" closeable>
    <van-form @submit="handleSubmit" :loading="loading">
      <van-field
        v-model="formFields.UserName"
        name="用户名"
        label="用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field
        v-model="formFields.newPwd"
        type="password"
        name="密码"
        label="密码"
        :rules="[{ required: false, message: '请输入密码' }]"
      />
      <van-field
        v-model="formFields.RealName"
        name="姓名"
        label="姓名"
        :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <van-field name="性别" label="性别">
        <template #input>
          <van-radio-group v-model="formFields.Sex" direction="horizontal">
            <van-radio :name="0" shape="square">女</van-radio>
            <van-radio :name="1" shape="square">男</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="出生日期"
        :value="formFields.Birthday"
        label="出生日期"
        @click="showCalendar = true"
      />
      <van-calendar
        v-model="showCalendar"
        color="#1989fa"
        @confirm="onConfirmDate"
      />

      <VanFieldVueTreeSelect
        v-model="formFields.DepartmentId"
        name="DepartmentId"
        label="所属部门"
        :multiple="false"
        :option="option"
        :columns="DepartmentIdTreeData"
        :rules="[{ required: false, message: '请选择所属部门' }]"
      />

      <van-field-checkbox
        name="角色"
        label="角色"
        :columns="RoleOptionList"
        v-model="formFields.RoleIdList"
        :option="{ label: 'RoleName', value: 'Id' }"
      />

      <div style="margin: 16px;">
        <van-button
          v-if="hasPerm('Base_User.Edit')"
          block
          type="info"
          native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </van-popup>
</template>

<script>
import {
  Base_User_GetTheData,
  Base_User_SaveData,
  Base_Department_GetTreeDataList,
  Base_Role_GetDataList
} from "@/api";
import moment from "moment";
import VanFieldCheckbox from "@/components/VanField/VanFieldCheckbox";
import VanFieldVueTreeSelect from "@/components/VanField/VanFieldVueTreeSelect";
import { mapGetters } from "vuex";

export default {
  components: {
    VanFieldCheckbox,
    VanFieldVueTreeSelect
  },
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      formFields: {
        UserName: "",
        newPwd: "",
        RealName: "",
        Sex: "0",
        Birthday: "",
        DepartmentId: "",
        RoleIdList: []
      },
      entity: {},
      showCalendar: false,
      showPicker: false,
      DepartmentIdTreeData: [],
      RoleOptionList: [],
      option: {
        label: "Text",
        value: "Id"
      }
    };
  },
  computed: {
    ...mapGetters(["hasPerm"])
  },
  methods: {
    add() {
      this.entity = {};
      this.visible = true;
      this.formFields = {
        UserName: "",
        newPwd: "",
        RealName: "",
        Sex: "0",
        Birthday: "",
        DepartmentId: "",
        RoleIdList: []
      };
      this.init();
    },
    edit(id) {
      this.visible = true;
      this.$nextTick(() => {
        this.formFields = {
          UserName: "",
          newPwd: "",
          RealName: "",
          Sex: "0",
          Birthday: "",
          DepartmentId: "",
          RoleIdList: []
        };

        Base_User_GetTheData({ id: id }).then(resJson => {
          this.entity = resJson.Data;
          Object.keys(this.formFields).forEach(item => {
            this.formFields[item] = this.entity[item];
          });

          if (this.formFields.Birthday) {
            this.formFields.Birthday = moment(this.formFields.Birthday).format(
              "YYYY-MM-DD"
            );
          }

          this.init();
        });
      });
    },

    handleSubmit(value) {
      this.entity = Object.assign(this.entity, this.formFields);
      this.entity["roleIdsJson"] = JSON.stringify(this.entity["RoleIdList"]);
      this.loading = true;
      Base_User_SaveData(this.entity).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast("操作成功");
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    },
    init() {
      Base_Department_GetTreeDataList({}).then(resJson => {
        if (resJson.Success) {
          this.DepartmentIdTreeData = resJson.Data;
        }
      });
      Base_Role_GetDataList({}).then(resJson => {
        if (resJson.Success) {
          this.RoleOptionList = resJson.Data;
        }
      });
    },
    onConfirmDate(date) {
      this.formFields.Birthday = moment(date).format("YYYY-MM-DD");
      this.showCalendar = false;
    }
  }
};
</script>
